import React, { useState } from 'react';
import DragIndicatorOutlined from '@material-ui/icons/DragIndicatorOutlined';
import { no_del, obj_str, useCmd, WaitUmd, NavListSub, ListBox, PanelTitle, is_empty, BtMenu, Btn, loc } from 'sui';
import { PlcAdd } from './ctl';
import { urlWork } from 'nui';

const PlcView = ({ high, mod, setMod, main, hcmd }) => {
    const [open, setOpen] = useState(false);
    const umd = useCmd();

    const hadd = (val, tp, old) => {
        umd.startWait();

        if (tp === "copy") {
            urlWork(null, "config/copy", {v: val, plc: old},
                r => {
                    hcmd({type: "plc"});
                    umd.endWait();
                },
                e => umd.setWrong(loc("xgsb")));
        }
        else {
            urlWork(null, `config/${tp}`, {mod: "plc", v: [val]},
                r => {
                    hcmd({type: tp, v: r[0]});
                    umd.endWait();
                },
                e => umd.setWrong(loc("xgsb")));
        }
    };

    const hdel = (id) => {
        if (no_del()) {
            return;
        }

        umd.startWait();

        urlWork(null, "config/del", {mod: "plc", uid: id},
            r => {
                hcmd({type: "delplc", id: id});
                umd.endWait();
            },
            e => umd.setWrong(loc("xgsb")));
    };

    const hAction = (v, d) => {
        if (v === "add") {
            umd.hcur(null);
            setOpen(true);
        }
        else if (v === "edit") {
            umd.hcur(d);
            setOpen(true);
        }
        else if (v === "del") {
            hdel(obj_str(d, "id"));
        }
        else if (v === "copy") {
            umd.hcur(d, "copy");
            setOpen(true);
        }
    };

    const Left = () => <Btn hcmd={() => hAction("add", null)}>{loc("mg_268")}</Btn>;

    const getItem = () => {
        if (is_empty(main)) {
            return null;
        }

        const ret = [];

        const lst = [
            {key: "del", val: loc("sc")},
            {key: "edit", val: loc("bj")},
            {key: "copy", val: loc("cmd_134")},
        ];

        main.forEach(d => {
            const hpar = () => <BtMenu lst={lst} hcmd={v => hAction(v, d)} icon={<DragIndicatorOutlined/>}/>;

            ret.push(<NavListSub cur={mod} value={d.value} uid={d.uid} sel={true} sval={d.id}
                hcmd={setMod} key={d.uid} sub={d.sub} scut={19} btpar={hpar}/>);
        });

        return ret;
    };

    return (
        <div className="w-1/4">
            <PanelTitle left={<Left/>} cl="gray"/>
            <div className="overflow-auto">
                <div style={{ height: high + "px" }}>
                    <ListBox dense={false}>
                        {getItem()}
                    </ListBox>
                </div>
            </div>
            <WaitUmd umd={umd}/>
            <PlcAdd umd={umd} open={open} setOpen={setOpen} hcmd={hadd} main={main}/>
        </div>
    );
};

export {PlcView};
